Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.

Login Member

Materi Mata Kuliah

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

03 jam 10 menit 00 detik

02 jam 10 menit 00 detik

02 jam 09 menit 00 detik

02 jam 01 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 38 menit 00 detik

00 jam 10 menit 00 detik

00 jam 50 menit 00 detik

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

00 jam 00 menit 00 detik

    Materi belum tersedia

DOM (Document Object Model)

DOM (Document Object Model) adalah representasi struktur halaman HTML dalam bentuk objek yang dapat diakses dan dimanipulasi menggunakan JavaScript.

Dengan DOM, kita bisa:

  • Mengubah isi teks
  • Mengubah style (CSS)
  • Menambah atau menghapus elemen
  • Merespon interaksi pengguna

1. Struktur DOM

HTML yang kita buat akan dibaca browser menjadi struktur seperti pohon (tree).

Contoh HTML:

 
<html>
<body>
<h1>Judul</h1>
<p>Paragraf</p>
</body>
</html>
 

👉 Akan menjadi struktur DOM:

  • document
    • html
      • body
        • h1
        • p

2. Mengakses Elemen HTML

JavaScript menyediakan beberapa cara untuk memilih elemen HTML.

a. getElementById

 
let judul = document.getElementById("judul");
 

b. querySelector

 
let paragraf = document.querySelector("p");
 

👉 Bisa memilih berdasarkan:

  • tag
  • class
  • id

c. querySelectorAll

 
let semuaParagraf = document.querySelectorAll("p");
 

👉 Mengambil banyak elemen sekaligus.

3. Mengubah Konten HTML

a. innerHTML

 
document.getElementById("judul").innerHTML = "Judul Baru";
 

b. textContent

 
document.getElementById("judul").textContent = "Teks Baru";
 

👉 textContent lebih aman karena tidak membaca HTML.

4. Mengubah Style (CSS)

 
document.getElementById("judul").style.color = "red";
 

5. Mengubah Atribut

 
document.getElementById("gambar").src = "gambar2.jpg";
 

6. Menambah Elemen

 
let p = document.createElement("p");
p.textContent = "Paragraf baru";

document.body.appendChild(p);
 

7. Menghapus Elemen

 
let el = document.getElementById("hapus");
el.remove();
 

8. Contoh Program DOM Sederhana

 
<!DOCTYPE html>
<html>
<head>
<title>Belajar DOM</title>
</head>
<body>

<h1 id="judul">Judul Lama</h1>
<button onclick="ubahJudul()">Ubah Judul</button>

<script>
function ubahJudul() {
document.getElementById("judul").innerHTML = "Judul Baru";
}
</script>

</body>
</html>
 

9. Contoh Manipulasi Style

 
<p id="teks">Ini teks</p>
<button onclick="ubahWarna()">Ubah Warna</button>

<script>
function ubahWarna() {
document.getElementById("teks").style.color = "blue";
}
</script>
 

Kesalahan Umum

  1. Salah penulisan ID atau selector
  2. Mengakses elemen sebelum halaman selesai dimuat
  3. Salah penggunaan innerHTML
  4. Tidak memahami perbedaan selector

Kesimpulan

DOM memungkinkan JavaScript untuk mengakses dan memanipulasi elemen HTML secara dinamis sehingga website menjadi lebih interaktif. Dengan memahami cara memilih elemen, mengubah konten, style, dan atribut, mahasiswa dapat mengontrol tampilan halaman web melalui JavaScript. Penguasaan DOM merupakan salah satu skill paling penting dalam pengembangan frontend.

Report Error